<template>
  <div class="flex flex-col h-full">
    <div class="drag h-[40px] flex items-center flex-shrink-0 select-none py-5 px-2">
      <div class="logo no-drag flex items-center">
        <span class="logo-title text-[14px] text-base">设置</span>
      </div>
      <div class="ml-auto flex gap-7">
        <div class="flex items-center gap-2">
          <div
            class="action no-drag cursor-pointer rounded-[5px] p-1.5 text-[12px] transition-all hover:!bg-red-500"
            @click="handleQuit"
          >
            <icon-svg-header-nav-close />
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 flex flex-row overflow-hidden mt-4 ml-1">
      <Anchor
        class="w-[90px]"
        style="border-right: 1px solid #e3e3e3; margin-top: 25px"
        :items="Items"
        :get-current-anchor="() => currentCard"
        @click="handelAnchor"
        showInkInFixed
      />
      <div class="flex-1 flex flex-col px-5 overflow-y-auto">
        <LoginAccount v-if="currentCard == 'loginAccount'" />
        <Catalogue v-else-if="currentCard == 'catalogue'" />
        <TaoBaoAccount v-else />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Anchor } from 'ant-design-vue';
import LoginAccount from './components/loginAccount.vue';
import Catalogue from './components/catalogue.vue';
import TaoBaoAccount from './components/taobaoAccount.vue';
import { AnchorLinkItemProps } from 'ant-design-vue/es/anchor/AnchorLink';
const Items: AnchorLinkItemProps[] = [
  {
    key: '1',
    href: 'loginAccount',
    title: '登陆账号'
  },
  {
    key: '2',
    href: 'catalogue',
    title: '目录设置'
  },
  {
    key: '3',
    href: 'taobaoAccount',
    title: '淘宝账号'
  }
];
const currentCard = ref('loginAccount');

const handleQuit = () => {
  window.clientAppSdk.ipc.ipcRenderer.send('rc:childWindow', 'close');
};

const handelAnchor = (e: MouseEvent, link: any) => {
  currentCard.value = link.href;
  e.preventDefault();
};
</script>

<style lang="less" scoped>
:deep(.ant-anchor-wrapper:not(.ant-anchor-wrapper-horizontal) .ant-anchor::before) {
  height: 0;
}

:deep(.ant-anchor-wrapper:not(.ant-anchor-wrapper-horizontal) .ant-anchor .ant-anchor-ink) {
  background-color: black;
  right: 0;
  left: auto;
}

:deep(.ant-anchor-wrapper .ant-anchor .ant-anchor-link-active > .ant-anchor-link-title) {
  color: black;
  font-weight: bold;
}
</style>
